<template>
  <up-navbar bgColor="#f4f4f4" @leftClick="back()" :customStyle="{height:'100px'}">
    <template #center>
      <view class="flex-center">
        111
      </view>
    </template>
    <template #right>
      <up-icon name="search" size="24" @click="toPath('#')"></up-icon>
      <view class="concern">关注</view>
    </template>
  </up-navbar>
  <swiper
      class="swiper"
      :current="shopParams.activeMenu"
      circular
      @change="e => shopStore.updateShopParams({activeMenu: e.detail.current})"
      :duration="300"
  >
    <swiper-item>
      <store-home></store-home>
    </swiper-item>
    <swiper-item>
      <a-scroll-view @loadMore="console.log('加载了')" height="100vh">
        <up-waterfall v-model="flowList" ref="uWaterfallRef">
          <template v-slot:left="{leftList}">
            <view class="shop-item" v-for="(item, index) in leftList" :key="index"
                  @click="toPath('/shop/index/detail')">
              <up-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></up-lazy-load>
              <view class="p-20">
                <view class="shop-title text-2">
                  {{ item.title }}
                </view>
                <view class="shop-price">{{ item.price }}</view>
              </view>

            </view>
          </template>
          <template v-slot:right="{rightList}">
            <view class="shop-item" v-for="(item, index) in rightList" :key="index"
                  @click="toPath('/shop/index/detail')">
              <up-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></up-lazy-load>
              <view class="p-20">
                <view class="shop-title text-2">
                  {{ item.title }}
                </view>
                <view class="shop-price u-f-sm">
                  ￥<span class="u-f-sxl">{{ item.price }}</span>
                  <span class="u-f-sm f-c-9" style="margin-left: 15rpx">22+单历史成交</span>
                </view>
              </view>
            </view>
          </template>
        </up-waterfall>
      </a-scroll-view>
    </swiper-item>
    <swiper-item>
      <category></category>
    </swiper-item>
  </swiper>
  <shop-menu/>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {back, toPath} from "@/util/router/router";
import {useShopParamsStore} from "@/store/shop";
import {onLoad} from '@dcloudio/uni-app'
import {storeToRefs} from 'pinia'
import category from "@/shop/components/store/category.vue";
import StoreHome from "@/shop/components/store/store-home.vue";


const shopStore = useShopParamsStore()
const {shopParams} = storeToRefs(shopStore) // 只解构响应式状态
const flowList = ref([])
const list = ref([
  {
    price: 35,
    title: '北国风光，千里冰封，万里雪飘',
    shop: '李白杜甫白居易旗舰店',
    image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
  },
  {
    price: 75,
    title: '望长城内外，惟余莽莽',
    shop: '李白杜甫白居易旗舰店',
    image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
  },
  {
    price: 385,
    title: '大河上下，顿失滔滔',
    shop: '李白杜甫白居易旗舰店',
    image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
  },
  {
    price: 784,
    title: '欲与天公试比高',
    shop: '李白杜甫白居易旗舰店',
    image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/zzpic23369_s.jpg',
  },
  {
    price: 7891,
    title: '须晴日，看红装素裹，分外妖娆',
    shop: '李白杜甫白居易旗舰店',
    image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2130_s.jpg',
  },
  {
    price: 2341,
    shop: '李白杜甫白居易旗舰店',
    title: '江山如此多娇，引无数英雄竞折腰',
    image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23346_s.jpg',
  },
  {
    price: 661,
    shop: '李白杜甫白居易旗舰店',
    title: '惜秦皇汉武，略输文采',
    image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23344_s.jpg',
  },
  {
    price: 1654,
    title: '唐宗宋祖，稍逊风骚',
    shop: '李白杜甫白居易旗舰店',
    image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
  },
  {
    price: 1678,
    title: '一代天骄，成吉思汗',
    shop: '李白杜甫白居易旗舰店',
    image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
  },
  {
    price: 924,
    title: '只识弯弓射大雕',
    shop: '李白杜甫白居易旗舰店',
    image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
  },
  {
    price: 8243,
    title: '俱往矣，数风流人物，还看今朝',
    shop: '李白杜甫白居易旗舰店',
    image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
  },
])


const addRandomData = () => {
  for (let i = 0; i < 10; i++) {
    let index = Math.floor(Math.random() * 10);
    console.log(index)
    // 先转成字符串再转成对象，避免数组对象引用导致数据混乱
    let item = JSON.parse(JSON.stringify(list.value[index]))
    item.id = Math.random(10000);
    flowList.value.push(item);
  }
}

onLoad(() => {
  addRandomData()
})
</script>


<style scoped lang="scss">
@import "~@/static/css/index.css";

.swiper {
  height: 100vh;
}

.shop-item {
  border-radius: 20rpx;
  background: #fff;
  margin: 20rpx;

  .shop-title {
    font-size: 24rpx;
  }

  .shop-price {
    color: #fd4b03;
  }
}

.concern {
  color: #333;
  font-size: 26rpx;
  padding: 5rpx 12rpx;
  border-radius: 10rpx;
  border: 1rpx solid #333;
  margin-left: 20rpx;
}
</style>
